<template>
  <div class="large-base-card lg-base-card"
       :style="{ height: height,background: '#fff' }">
    <div class="card-header">
      <div>
        <slot name="title">
          <div class="title">
            {{ title }}
            <img :src="rightArrow"
                 class="right-arrow">
          </div>
        </slot>
      </div>

      <div class="right">
        <slot name="right"> </slot>
      </div>
    </div>

    <div :class="contentType==='flex'?'content-flex':'content-block'"
         :style="{padding:contentPadding}">
      <slot>
        <div class="empty">暂无数据</div>
      </slot>
    </div>
  </div>
</template>

<script setup>
import rightArrow from '@/assets/img/theme1/right-arrow.png';

const props = defineProps({
  title: { type: String, default: '' },
  height: { type: String, default: '6.2rem' },
  contentType: { type: String, default: 'flex' },
  contentPadding: { type: String, default: '0.2rem 0.3rem' },
});

</script>

<style lang="less" scoped>
@import "./style/common.less";
@import "./style/index.less";
.title {
  padding-left: 0.2rem !important;
  padding-top: 0.2rem !important;
}
</style>